<template>
  <div class="buy">
    <div class="hidden" v-if="!isLogin">
      <el-row>
        <el-col :span="6" :offset="6">
          <span>为方便您购买，请提前登录</span>
        </el-col>
        <el-col :span="4">
          <div class="hidden_item" @click="loginClick">
            <el-link :underline="false" type="warning">立即登录</el-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span=9 :offset="2">
        <div class="product_img">
          <img :src="buyProductMessage.buyMessage.buyProductImg">
        </div>
      </el-col>
      <el-col :span="9" :offset="2">
        <div class="right_list">
          <div class="product_name">
            {{buyProductMessage.productName}}
          </div>
          <p class="product_title">
            {{buyProductMessage.buyMessage.buyProductTitle}}
          </p>
          <p class="shop_title">小米自营</p>
          <p class="product_price">{{buyProductMessage.productPrice}} 元</p>
        </div>
        <div class="adress">
          <el-card shadow="always">
            <i class="el-icon-location-outline"></i>
            <span>{{adress.provinces}}</span>
            <span>{{adress.city}}</span>
            <span>{{adress.area}}</span>
            <span class="title">{{adress.detail}}</span>
            <div class="adress_bottom">
              <span><el-link :underline="false" type="warning" @click="updateAdress">修改</el-link></span>

              <span><el-link :underline="false" type="warning" disabled>有现货</el-link></span>

            </div>
          </el-card>
        </div>
        <div class="select_adress">
          选择版本
        </div>
        <div class="selct_adress">
          <span class="adress_item" v-for="item in buyProductMessage.productColorRelatives">
            <el-radio v-model="productColor" :label="item" border>{{item.productColor}}</el-radio>
          </span>
        </div>

        <div class="product_bottom">
          <el-card>
            <div class="product_type">
              <span>{{buyProductMessage.productName}}</span>
              <span>{{productColor.productColor}}</span>
              <span class="price">{{buyProductMessage.productPrice}}元</span>
            </div>
            <div class="product-price">
              总计：{{buyProductMessage.productPrice}}元
            </div>
          </el-card>
        </div>

        <div class="bottom_button" @click="addShopCart">
          <el-button type="warning">加入购物车</el-button>
        </div>

      </el-col>
    </el-row>
    <el-dialog title="收货地址" :visible.sync="visible">
     <el-row>
       <el-col :span="14" :offset="5">
         <el-form label-position="right" label-width="80px" :model="adress">
           <el-form-item label="收货人">
             <el-input v-model="adress.realName"></el-input>
           </el-form-item>
           <el-form-item label="手机号码">
             <el-input v-model="adress.phone"></el-input>
           </el-form-item>
           <el-form-item label="省份">
             <el-input v-model="adress.provinces"></el-input>
           </el-form-item>
           <el-form-item label="市区">
             <el-input v-model="adress.city"></el-input>
           </el-form-item>
           <el-form-item label="县镇">
             <el-input v-model="adress.area"></el-input>
           </el-form-item>
           <el-form-item label="具体地址">
             <el-input v-model="adress.detail"></el-input>
           </el-form-item>
         </el-form>
       </el-col>
     </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="btnCancel" class="btn">取 消</el-button>
            <el-button type="primary" @click="btnTrue" class="btn">确 定</el-button>
          </div>

    </el-dialog>
    <bottom-bar></bottom-bar>

  </div>
</template>

<script>
  import {request} from "network/request";
  import BottomBar from "components/bottomBar/BottomBar";

  export default {
    name: "Buy",
    components:{
      BottomBar
    },

    created() {
      let that = this;
      console.log("======组件被创建");
      this.userId = (this.$store.state.userId != null && this.$store.state.userId !== "") ? this.$store.state.userId : "";
      this.adress.userId = this.userId;
      this.adress.adressId = null;
      this.adress.realName = (this.$store.state.username != null && this.$store.state.username !== "") ? this.$store.state.username : "";
      this.productId = this.$route.query.productId;
      //组件被创建的时候， 默认发送网络，为用户添加默认地址
      request({
        url: '/adress',
        method: 'post',
        data: this.adress,
      }).then(res => {
        this.adress.realName = res.data.data.realName;
      });

      //组件被创建时， 发送网络请求, 得到商品的信息
      request({
        url: '/buy-message',
        params:{
          userId: this.userId,
          productId: this.productId
        }
      }).then(res => {
        this.buyProductMessage = res.data.data;
        // this.productColor = res.data.data.productColor;
        if(res.data.data.productColorRelatives[0] != null){
          that.productColor = res.data.data.productColorRelatives[0];
        }
        // this.adress = res.data.data.adress;
        for( let key in res.data.data.adress ){
          // if(key !== "adressId"){
            that.adress[key] = res.data.data.adress[key];
          // }
        }

        console.log(res);
      })
    },

    data(){
      return{

        userId: '',
        productId: '',
        buyProductMessage: {
          account: 0,
          buyMessage: {
            buyId: '',
            buyProductImg: '',
            buyProductTitle: '',
            productId: '',
          },
          productColorRelatives: [],
          productName: '',
          productPrice: 0,
          userId: '',
        },
        productColor: {
          productColorId: '',
          productColor: ''
        },
        shopcart: {
          userId: '',
          productId: '',
          productColorId: '',
          productNum: 0,
        },
        adress:{
          adressId: "",
          provinces: '广东省',
          city: '深圳市',
          area: '宝安区',
          detail: '红星大道',
          phone: "",
          realName: "",
          userId: "",
          adressLevel: 0,
        },
        visible : false,
        formLabelWidth: '120px',
      }
    },

    computed:{
      isLogin(){
        return this.$store.state.username != null && this.$store.state.username !== ""
      }
    },

    methods:{
      //添加购物车
      addShopCart(){
        const userId = (this.$store.state.userId != null && this.$store.state.userId !== "") ? this.$store.state.userId : "";
        //如果是未登录 -- 显示弹窗 ： 提示用户登录
        if(userId === ""){
          this.$alert('未登录，请登录之后再添加到购物车', '操作失败', {
            confirmButtonText: '确定',
            callback: action => {

            }
          });
          //如果是登录下的状态
        }else{
          this.shopcart.userId = this.userId;
          this.shopcart.productColorId = this.productColor.productColorId;
          this.shopcart.productId = this.productId;
          this.shopcart.productNum = 1;
          request({
            url: 'shopcart/addProductToShopcart',
            method: 'post',
            data: this.shopcart,
          }).then( res => {

            this.$alert('添加购物车成功', '操作成功', {
              confirmButtonText: '确定',
              callback: action => {
                this.$store.commit('setShopcartCount', 1);
              }
            });
          });
        }
        console.log("加入购物车", this.productColor);
      },

      //点击登录
      loginClick(){
        this.$router.push('/login');
      },

      //修改地址
      updateAdress(){
        console.log("======");
        this.visible = true;
      },

      //取消
      btnCancel(){
        this.visible = false;
      },
      //按钮确定
      btnTrue(){
        this.visible = false;
        // 发送修改地址请求
        request({
          url: '/adress',
          method: 'put',
          data: this.adress
        }).then(res => {
          console.log(this.adress);
        });
      }
    }
  }
</script>

<style scoped>
  .hidden{
    height: 50px;
    border-bottom: 2px solid #E0E0E0;
  }
  .product_img{
    margin-top: 80px;
  }
  .product_img img{
    width: 100%;
  }

  .product_name{
    margin-top: 50px;
    font-size: 22px;
  }

  .product_title{
    width: 90%;
    font-size: 13px;
    padding-top: 8px;
    line-height: 1.5;
    color: #B0B0B0;
  }
  .shop_title{
    color: #FF6700;
    font-size: 14px;
  }
  .product_price{
    padding: 15px 0;
    color: #FF6700;
    border-bottom: 1px solid #B0B0B0;
  }

  .adress span{
    font-size: 14px;
    padding: 5px 5px;
  }

  .adress .adress_bottom{
    padding: 10px 0;
    font-size: 13px;
  }

  .select_adress{
    padding: 20px 0;
  }

  .adress_item{
    display: inline-block;
    margin-right: 10%;
    margin-top: 20px;
  }

  .product_bottom{
    margin-top: 20px;
    padding: 20px 0;
  }

  .product_bottom .product_type{
    padding: 10px 0 30px 0;
    font-size: 14px;
    color: #616192;
  }
  .product_bottom .product_type .price{
    margin-left: 70%
  }

  .product-price{
    font-size: 20px;
    color: #FF6700;
  }

  .bottom_button{
    margin: 30px 0;
    width: 100%;
  }
  .el-button{
    width: 70%;
  }

  .btn{
    width: 100px;

  }

</style>
